<template>
  <div class="about-page">
    <div class="section">
      <h2 class="section-title">关于页面</h2>
      <div class="card">
        <p>这是一个关于页面，展示了路由跳转和ECharts图表功能。</p>
        <el-button type="success" @click="goBack">返回首页</el-button>
      </div>
    </div>

    <div class="section">
      <h2 class="section-title">ECharts 图表示例</h2>
      <div class="chart-container">
        <EChartDemo />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import EChartDemo from '../components/EChartDemo.vue'

const router = useRouter()
const goBack = () => router.push('/')
</script>

<style scoped>
.about-page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.chart-container {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}
</style>